import { CloseCircleOutlined, SmileOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProFormDateTimeRangePicker,
  ProFormDependency,
  ProFormGroup,
  ProFormList,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useEffect, useState } from 'react';
const operator = [
  {
    value: 'eq',
    label: '相等',
  },
  {
    value: 'gte',
    label: '大于等于',
  },
  {
    value: 'gt',
    label: '大于',
  },
  {
    value: 'lt',
    label: '小于',
  },
  {
    value: 'lte',
    label: '小于等于',
  },
  // {
  //   value: 'in', 多值
  //   label: '包含'
  // },
  {
    value: 'like',
    label: '模糊',
  },
];
/**
 * valueType类型有
 * dateTime: 日期类型
 * digit: 数字类型
 * select: 选择类型
 * dateRange: 时间间隔类型
 * digitRange: 数字间隔
 * @param props
 * @returns
 */
const TableFilter = (props: any) => {
  const [visible, setVisible] = useState(false);
  const keyMap = new Map();
  const columns = props.columns.map((item: any) => {
    keyMap.set(item.dataIndex, item.valueType);
    return {
      value: item.dataIndex,
      label: item.title,
      valueType: item.valueType,
    };
  });

  useEffect(() => {
    setVisible(props.visible);
  }, [props.visible]);
  return (
    <ModalForm
      title="高级查询"
      visible={visible}
      width={1000}
      // onOpenChange={setVisible}
      onFinish={async (values) => {
        // 需要加loading
        // setConfirmLoading(true);
        // await props.onOk();
        // setConfirmLoading(false);
        props.onFinish(values);
      }}
      modalProps={{
        onCancel: () => {
          props.onCancel();
        },
      }}
    >
      <ProFormList
        name="filters"
        initialValue={
          [
            // {
            //   value: '333',
            //   label: '333',
            // },
          ]
        }
        copyIconProps={{ Icon: SmileOutlined, tooltipText: '复制此行到末尾' }}
        deleteIconProps={{
          Icon: CloseCircleOutlined,
          tooltipText: '不需要这行了',
        }}
      >
        <ProFormGroup key="group">
          <ProFormSelect key="field" options={columns} width="sm" name="field" label="选择字段" />

          <ProFormDependency name={['field']}>
            {({ field }) => {
              return (
                <ProFormSelect
                  key="operator"
                  options={operator}
                  width="xs"
                  name="operator"
                  label="操作号"
                />
              );
            }}
          </ProFormDependency>
          <ProFormDependency name={['field']}>
            {({ field }) => {
              // console.log(field, value, '---field---');
              if (keyMap.get(field) === 'dateRange') {
                return (
                  <ProFormDateTimeRangePicker key="value" width="md" name="value" label="值" />
                );
              } else {
                return <ProFormText key="value" width="sm" name="value" label="值" />;
              }
            }}
          </ProFormDependency>
          <ProFormSelect
            key="linkOper"
            options={[
              {
                value: 'and',
                label: '并且',
              },
              {
                value: 'or',
                label: '或者',
              },
            ]}
            width="xs"
            name="andOr"
            label="条件关系"
          />
        </ProFormGroup>
      </ProFormList>
    </ModalForm>
  );
};

export default TableFilter;
